<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript" src="js/menu-tab.js">
	
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script/jquery.maphilight.min.js"></script>

<script type="text/javascript">
$(function() {
		$('.map').maphilight();
	});
</script>
	
<script type="text/javascript"> 
$(function() { 
	$.fn.maphilight.defaults = { 
	fill: true, 
	fillColor: '1DDB16', 
	fillOpacity: 0.5, 
	stroke: true, 
	strokeColor: 'FFFFFF', 
	strokeOpacity: 1, 
	strokeWidth: 1, 
	fade: true, 
	alwaysOn: false, 
	neverOn: false, 
	groupBy: false 
	};
$('img[usemap]').maphilight(); 
}); 
</script>

    <form id="healthMainForm" name="healthMainForm" action="" method="post">
    <div style="margin: 30px 0px 2px 50px; font-size: 30px;">헬스 관리</div>
		<div id="healthMain-contents">
			<div id="tab-main-contents"> 
	            <div id="health-human">
	                <div id="gen-selectBtn">
	                    <button type="button" value="male" name="M" onclick="javascript:exerciseMain('','')">전신</button>
	                    <button type="button" value="femle" name="F" onclick="javascript:exerciseMain('A','')">유산소</button>
<!-- 	                    <a href="">전신</a>
	                    <a href="">유산소</a> -->
	                </div>
	                <div id="human">
	                	<div id="front" style="display: show">
                        <img alt="" src="image/man_frontMax.jpg" width="279px" height="486px" border="0" class="map" usemap="#Map">
                        <map name="Map" id="Map">
                        	<area shape="poly"  coords="106,105, 101,109, 93,133, 91,141, 89,149,
                        								88,162, 88,164, 92,168, 97,170, 102,162,
                        								110,148, 111,137, 109,128, 110,124" 
                        								onclick="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','이두')" alt="될까?" title="이두"/>
                        	<area shape="poly"  coords="172,105, 178,105, 183,115, 186,124, 187,131,
                        								191,145, 195,159, 194,166, 192,166, 186,173,
                        								176,157, 170,147, 172,131, 173,117" onclick="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','이두')" alt="될까?" title="이두"/>
                        	<area shape="poly"  coords="110,106, 122,104, 134,102, 140,106, 153,102, 165,104, 170,106,
                        								173,117, 172,126, 171,135, 168,136, 162,136, 158,138, 151,137,
                        								145,136, 140,133, 136,136, 131,139, 125,138, 118,138, 111,134,
                        								109,130, 109,124, 109,118, 108,111" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','가슴')" alt="될까?" title="가슴"/>
                        	<area shape="poly"  coords="113,139, 125,138, 139,137, 153,138, 171,139,
                        								169,151, 166,164, 166,174, 170,210, 155,212,
                        								138,210, 123,210, 112,212, 115,173, 116,165,
                        								113,150, 112,144" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','복부')" alt="될까?" title="복부"/>
                        	<area shape="poly"  coords="110,214, 116,212, 126,215, 136,215, 146,215, 156,215, 170,214,
                        								173,225, 176,238, 178,248, 178,258, 179,267, 180,282, 182,298,
                        								180,311, 183,322, 187,332, 190,344, 187,363, 188,379, 188,399,
                        								190,411, 191,420, 198,433, 187,450, 181,451, 176,429, 174,414,
                        								175,389, 171,363, 165,347, 166,330, 161,313, 151,278, 145,255,
                        								144,236, 136,236, 134,255, 129,278, 118,313, 113,325, 114,349,
                        								109,368, 105,388, 105,410, 105,424, 103,441, 99,450, 89,450,
                        								82,445, 82,438, 91,418, 91,408, 91,375, 91,351, 93,332, 97,319,
                        								99,300, 101,278, 104,259, 103,246, 106,238, 110,223" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','하체')" alt="될까?" title="하체"/>
                        	<area shape="poly"  coords="41,330, 45,340, 68,384, 48,358, 52,440,
                        								41,386, 28,440, 33,358, 16, 384" 
                        								onclick="$('#front').hide(); $('#Back').show();"
                        								href="javascript:exerciseManBack();" title="후면" target="#human"/>
                        </map>
                        
                        
                        </div>
                        <div id="Back" style="display: none;">
                        <img alt="" src="image/man_backMax.jpg" width="279px" height="486px" border="0" class="map" usemap="#Map2">
                        <map name="Map2" id="Map2">
                        	<area shape="poly"  coords="97,99, 103,95, 116,88, 124,85, 128,79, 134,77, 139,77,
                        								146,77, 152,77, 155,83, 161,85, 164,90, 178,97, 184,100,
                        								182,105, 176,107, 170,108, 163,104, 156,102, 150,103,
                        								145,102, 140,97, 134,98, 128,101, 123,102, 117,103,
                        								110,106, 105,104, 101,104" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','어깨')" alt="될까?" title="어깨"/>
                        	<area shape="poly"  coords="111,91, 102,96, 98,101, 94,104, 93,111,
                        								91,117, 88,124, 87,129, 83,140, 87,147,
                        								91,151, 97,152, 101,146, 105,140, 111,132,
                        								110,123, 111,118, 110,110, 112,101" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','삼두')" alt="될까?" title="삼두"/>
                        	<area shape="poly"  coords="167,91, 172,93, 178,97, 184,100, 186,107,
                        								189,116, 192,126, 196,134, 199,141, 203,149,
                        								198,149, 194,150, 193,153, 192,157, 192,162,
                        								187,155, 183,150, 180,145, 175,139, 170,132,
                        								170,124, 171,120, 170,114, 170,108, 169,101,
                        								167,97" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','삼두')" alt="될까?" title="삼두"/>
                        	<area shape="poly"  coords="110,106, 122,104, 134,102, 140,106, 153,102, 165,104, 170,106,
                        								173,117, 172,126, 171,135, 168,136, 162,136, 158,138, 151,137,
                        								145,136, 140,133, 136,136, 131,139, 125,138, 118,138, 111,134,
                        								109,130, 109,124, 109,118, 108,111" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','등')" alt="될까?" title="등"/>
                        	<area shape="poly"  coords="113,139, 125,138, 139,137, 153,138, 171,139,
                        								169,151, 166,164, 166,174, 170,210, 155,212,
                        								138,210, 123,210, 112,212, 115,173, 116,165,
                        								113,150, 112,144" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','허리')" alt="될까?" title="허리"/>
                        	<area shape="poly"  coords="110,214, 116,212, 126,215, 136,215, 146,215, 156,215, 170,214,
                        								173,225, 176,238, 178,248, 178,258, 179,267, 180,282, 182,298,
                        								180,311, 183,322, 187,332, 190,344, 187,363, 188,379, 188,399,
                        								190,411, 191,420, 198,433, 187,450, 181,451, 176,429, 174,414,
                        								175,389, 171,363, 165,347, 166,330, 161,313, 151,278, 145,255,
                        								144,236, 136,236, 134,255, 129,278, 118,313, 113,325, 114,349,
                        								109,368, 105,388, 105,410, 105,424, 103,441, 99,450, 89,450,
                        								82,445, 82,438, 91,418, 91,408, 91,375, 91,351, 93,332, 97,319,
                        								99,300, 101,278, 104,259, 103,246, 106,238, 110,223" href="javascript:exerciseMain('${exerciseChoice.exercisePurpose }','하체')" alt="될까?" title="하체"/>
                        	<area shape="poly"  coords="41,330, 45,340, 68,384, 48,358, 52,440,
                        								41,386, 28,440, 33,358, 16, 384" 
                        								
                        								onclick="$('#Back').hide(); $('#front').show();"
                        								href="javascript:exerciseManFront();" title="앞면" target="#human"/>
                        </map>
                        </div>
                    </div>
	            </div>
	            <div id="health-contact">
	               <fieldset> 
	                   <legend>운동부위</legend>
	                   <p>
	                   <a>${exerciseChoice.exerciseRegio }</a>
	                   </p>
	               </fieldset>
	            </div>
	            <div id="health-list">
	                <fieldset>
	                    <legend>운 동</legend>
	                    <div>
						<c:forEach var="exercise" items="${exerciseList }">
							<p>
								<a href="">${exercise.exerciseName }</a>
							</p>
						</c:forEach>
					</div>  
	                </fieldset> 
	            </div>
	            <div id="health-information">
	                <fieldset>
	                    <legend>운 동 정 보</legend>    
                        <div>
                            <input type="button" value="추가">
                        </div>
	                </fieldset> 
	            </div>
	    	</div>         <!-- tab-main-contents -->
		</div>             <!-- healthMain-contents Div END -->
</form>
